Deno Fresh
DenoでうごくフルスタックのWebフレームワーク
DenoFreshでおさえておきたいコンセプト
ファイルベースルーティング
1ページはhandlersとpage componentで構成される
Web標準
.envから環境変数を読み込める
routes/にファイルを置く
routes/index.ts -> /
routes/blog/contact.ts -> /blog/contact
実際にはhandlersとpage componentの2つから構成されている
handlers：バックエンドAPIのようなもの
共通のレイアウト
例えばナビゲーションバーとか
layoutにカスタムハンドラで取得した値を入れるには？
ミドルウェア
_middleware.ts
1枚のWebページを海と島にたとえる。
海：静的なWebページ
島：動的なWebページ
すべてのページはサーバサイドでレンダリングされる
島のコンポーネントはislands/に配置する
クライアントサイドで実行される処理はislands/に置く
/islands/フォルダから何かをインクルードしない限り、JavaScriptはクライアントに送信されません。
onClickハンドラをislands外で使用できない
海と島を厳密に分けすぎないほうが良さそう。いろいろと使い勝手が悪い
ただハイドレーション前にどのような表示であって欲しいかは意識する必要がある
フォーム
使い方は同じで、送信したデータをカスタムハンドラーでキャッチして処理する
フォームだと辛いところ
1ページに複数フォームがある
ページのカスタムハンドラは使えない？
API用のカスタムハンドラを複数個用意になりそう
配列やオブジェクトを送りたいとき、バックエンド側で何とか解釈させる必要がある
FormをPOSTした後の遷移先
同じときどうしたらいい？
リダイレクト or ふつうにページ遷移
valueプロパティで参照を忘れないこと
モジュールとしてSignalの値を持つことでSignalを共有できる
https://gyazo.com/ca31fb6f342be37f92b5f9001740546e
cartを異なるislandからimportして共有できる。書き込むとcartの値が書き換わる
シグナルの値が変化したとしても、コンポーネント全体が再レンダリングされるわけではない？
↑なんでそう思ったのか不明
使っているコンポーネントではレンダリングされてそう
IS_BROWSER
https://gyazo.com/c2bb6de28d3833069d41eb9a5c8c399b
ハイドレーション前：「わいわい」が表示
ハイドレーション後：カウントのボタンが表示
https://gyazo.com/562462dbf250ecb0c94d5d0635dcd9db
カスタムハンドラ
リダイレクト
1つのページンコンポーネントに複数のPOSTカスタムハンドラを用意したい場合どうしたらいいか
振る舞い込みのUIライブラリを使えないのが難点かも
使えないことはないが一工夫必要
本番環境へデプロイする際は事前にビルドが必要
ビルドしないとTailwindのスタイリングが効かない
1. ビルド
$ deno run -A dev.ts build
2. アプリ起動
$ deno run -A main.ts
エラーページへの遷移
エラーページは_layout.tsx含めたうえでレンダリングされる
404エラー
routes/_404.tsxを作っておくとレンダリングされる
ページ遷移方法
エラーページにデータを渡したいとき：return ctx.renderNotFound();
データ渡さなくてよいとき：throw new Deno.errors.NotFound();
https://gyazo.com/fc128583515bd1e6e357f943ee4b6003
500エラー
routes/_500.tsxを作っておくとレンダリングされる
ページ遷移方法：例外を投げる。throw new Error("waiwai");
code:_500.tsx
export default function Error500Page({ error }: PageProps) {
return <p>500 internal error: {(error as Error).message}</p>;
}
https://gyazo.com/b2c3b459afe9bbf2fbd9a6f9baa1f808
エラーメッセージの表示
API叩いてバリデーションエラーであればページ内にレンダリングしたい
public.icon